<div class="documents-toolbar_modal modal">
    <div class="modal-header">
        <h1 class="dialog-title">Documents toolbar settings</h1>
    </div>
    <div class="modal-body">
        <div class="options-pages">
            <span class="options-page" data-page="GENERAL" data-bind="css: {selected: isCurrentPageSelected($data, $element)}, click: setPage">General</span>
            <span class="options-page" data-page="RULES" data-bind="css: {selected: isCurrentPageSelected($data, $element)}, click: setPage">Rules</span>
        </div>
        <div data-page="GENERAL" data-bind="visible: isCurrentPageSelected($data, $element), with: generalOptions">
            <div>
                <input type="checkbox" data-bind="checked: showWorkingFiles" />
                <span>Show Working Files panel</span>
            </div>
            <div>
                <input type="checkbox" data-bind="checked: showCloseButton" />
                <span>Show </span>
                <span class="fa fa-times-circle"></span>
                <span class="muted"> close button </span>
                <span>on tab</span>
                <span class="muted" data-bind="visible: !showCloseButton()">[use middle mouse button to close tabs]</span>
            </div>
            <div>
                <input type="checkbox" data-bind="checked: useBracketsFont" />
                <span>Use Brackets font settings</span>
            </div>
        </div>
        <div data-page="RULES" data-bind="visible: isCurrentPageSelected($data, $element)">
            <div class="rule-set" data-bind="foreach: rules">
                <div class="dt-rule" data-bind="click: $parent.onSelectRule, css:{selected: $data === $parent.selectedRule()}">
                    <div class="dt-rule_background" data-bind="style:{background: background}"></div>
                    <div class="dt-rule_foreground" data-bind="style:{background: color}"></div>
                    <div class="dt-rule_name" data-bind="text: $parent.getCaption($data)"></div>
                </div>
            </div>
            <div class="rule-options" data-bind="with: selectedRule">
                <div class="_row">
                    <span>Apply to</span>
                    <input data-bind="value: name"/>
                    <div class="muted">You can apply rules to set of files. Example: *.css. Use <a href="http://www.w3schools.com/jsref/jsref_obj_regexp.asp">RegExp</a> to construct complex rules.</div>
                </div>
                <div class="_row">
                    <input type="checkbox" data-bind="checked: forThisProjectOnly"/>
                    <span>Use this rule only for specific project</span>
                    <div data-bind="visible: project() !== null">
                        <span>Project</span>
                        <input data-bind="value: project" />
                    </div>
                </div>
                <div class="_row">
                    <div id="color-background">
                        <div style="text-align: center;">
                            <span>Background:</span>
                            <div class="colorpicker" data-bind="colorpicker: background"></div>
                        </div>
                        <input class="color-text" data-bind="textInput: background" />
                    </div>
                    <div id="color-foreground">
                        <div style="text-align: center;">
                            <span>Color:</span>
                            <div class="colorpicker" data-bind="colorpicker: color"></div>
                        </div>
                        <input class="color-text" data-bind="textInput: color" />
                    </div>
                </div>
                <div class="_row tab-preview" data-bind="style:{color: color, background: background}">
                    <p>Preview</p>
                </div>
            </div>
            <div class="buttons-set">
                <button class="btn" data-bind="click: addNewRule">Add rule</button>
                <button class="btn" data-bind="click: removeRule, enable: selectedRule">Remove</button>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="dialog-button btn primary" data-bind="click: onClose">Close</button>
    </div>
</div>
